<template>

  <el-container style="min-height: 200vh; border: 1px solid #eee">
    <el-header style=" border-bottom: 1px solid #ccc; height: 100px;">
      <!--利用组件代替 原来的部分-->
      <Header :collapseBtnClass="collapseBtnClass" :collapse="isCollapse" />
    </el-header>
    <el-container>
      <el-aside width="sideWidth + 'px'"
        style="background-color: rgb(238, 241, 246); height:200vh; width:15%; box-shadow: 3px 0 6px rgb(0 21 0 )">
        <!--利用组件代替 原来的侧边栏部分-->
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
      </el-aside>

      <el-main>
        <!--        表示当前页面的子路由会在 router-view 中展示-->
        <router-view />
      </el-main>

    </el-container>
  </el-container>

</template>

<script>
// 导航组件
import Navigation from '@/components/Navigation'
import Title from '@/components/Title'
import HeadPortrait from '@/components/HeadPortrait'

export default {
  name: 'Home',
  components: {
    Navigation,
    Title,
    HeadPortrait
  }
}
</script>

<style lang="less" scoped>
.box-container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.el-header {
  color: #333;
  // text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

</style>
